<template>
  <div class="login-container">
    <div class="login-form-container">
      <div class="login-title">
        <h2>企业采购审批系统</h2>
      </div>
      
      <el-form ref="loginFormRef" :model="loginData" :rules="rules" class="login-form">
        <el-form-item prop="username">
          <el-input
            v-model="loginData.username"
            placeholder="用户名"
            :prefix-icon="User"
            clearable
          />
        </el-form-item>
        
        <el-form-item prop="password">
          <el-input
            v-model="loginData.password"
            type="password"
            placeholder="密码"
            :prefix-icon="Lock"
            show-password
            clearable
            @keyup.enter="handleLogin"
          />
        </el-form-item>
        
        <el-form-item>
          <el-button
            type="primary"
            :loading="loading"
            class="login-button"
            @click="handleLogin"
          >
            登录
          </el-button>
        </el-form-item>
        
        <div class="login-links">
          <router-link to="/register">
            <el-link type="primary">注册账号</el-link>
          </router-link>
        </div>

        <div v-if="errorMessage" class="error-message">
          {{ errorMessage }}
        </div>

      </el-form>
    </div>
  </div>
</template>

<script>
import { ref, reactive } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
import { User, Lock } from '@element-plus/icons-vue'
import { useAuthStore } from '@/store/auth'
import { formRules } from '@/utils/validate'

export default {
  name: 'Login',
  setup() {
    const router = useRouter()
    const route = useRoute()
    const authStore = useAuthStore()
    const loginFormRef = ref(null)
    const loading = ref(false)
    const errorMessage = ref('')
    
    const loginData = reactive({
      username: '',
      password: ''
    })
    
    const rules = {
      username: [
        formRules.required('请输入用户名')
      ],
      password: [
        formRules.required('请输入密码')
      ]
    }
    
    const handleLogin = () => {
      errorMessage.value = ''
      
      if (!loginFormRef.value) {
        console.error('表单引用不存在')
        return
      }
      
      loginFormRef.value.validate(async (valid) => {
        if (valid) {
          loading.value = true
          try {
            console.log('开始登录请求，提交数据:', loginData)
            const response = await authStore.login(loginData)
            console.log('登录成功，响应:', response)
            ElMessage.success('登录成功')
            
            // 如果有重定向地址，则跳转到重定向地址
            const redirectPath = route.query.redirect || '/'
            console.log('准备跳转到:', redirectPath)
            router.replace(redirectPath)
          } catch (error) {
            console.error('登录失败', error)
            errorMessage.value = '登录失败：' + (error.response?.data?.message || '用户名或密码错误')
            ElMessage.error(errorMessage.value)
          } finally {
            loading.value = false
          }
        }
      })
    }
    
    return {
      loginFormRef,
      loginData,
      rules,
      loading,
      errorMessage,
      handleLogin,
      User,
      Lock
    }
  }
}
</script>

<style scoped>
.login-container {
  height: 100vh;
  width: 100vw;
  background-color: #f5f7fa;
  display: flex;
  justify-content: center;
  align-items: center;
}

.login-form-container {
  width: 400px;
  padding: 30px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.login-title {
  text-align: center;
  margin-bottom: 30px;
}

.login-title h2 {
  font-size: 24px;
  color: #409EFF;
}

.login-button {
  width: 100%;
}

.login-links {
  margin-top: 15px;
  text-align: right;
}

.error-message {
  color: #f56c6c;
  font-size: 14px;
  margin-top: 15px;
  text-align: center;
}

.login-tips {
  margin-top: 20px;
  background-color: #f0f9eb;
  padding: 10px;
  border-radius: 4px;
  color: #67c23a;
  font-size: 14px;
}
</style> 